'use client'
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Sparkles, Zap, TrendingUp, ImageIcon, LogOut } from "lucide-react"
import { fetchWithJwtToken, JWT_TOKEN_KEY } from "@/lib/utils"
import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"

interface User {
  id: number;
  username: string;
}

export default function LandingPage() {
  const [user, setUser] = useState<User | null>(null)
  const router = useRouter()

  useEffect(() => {
    fetchWithJwtToken('/api/auth/getUser').then(data => setUser(data))
  }, [])

  const handleLogout = async () => {
    // 这里可以添加登出逻辑
    setUser(null)
    localStorage.removeItem(JWT_TOKEN_KEY)
    router.push("/")
    router.refresh()
  }

  const trialUser = () => {
    fetchWithJwtToken('/api/auth/trial', { method: 'POST' }).then(data => {
      if (typeof data !== 'string' || !data) return;
      localStorage.setItem(JWT_TOKEN_KEY, data)
    }).finally(() => {
      router.push("/generator")
      router.refresh()
    })
  }
  return (
    <div className="min-h-screen bg-gradient-to-b from-background to-muted/20">
      {/* Header */}
      <header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container mx-auto flex h-16 items-center justify-between px-4">
          <div className="flex items-center gap-2">
            <Sparkles className="h-6 w-6 text-primary" />
            <span className="text-xl font-bold">小红书 AI 生成器</span>
          </div>
          <nav className="flex items-center gap-4">
            {user ? (
              <>
                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                  <Sparkles className="h-4 w-4" />
                  {user.username}
                </div>
                <Button variant="ghost" size="sm" onClick={handleLogout}>
                  <LogOut className="mr-2 h-4 w-4" />
                  退出
                </Button>
              </>
            ) : (
              <>
                <Link href="/auth/login">
                  <Button variant="ghost">登录</Button>
                </Link>
                <Link href="/auth/sign-up">
                  <Button>注册</Button>
                </Link>
              </>
            )}
          </nav>
        </div>
      </header>

      {/* Hero Section */}
      <section className="container mx-auto px-4 py-20 text-center">
        <div className="mx-auto max-w-3xl space-y-6">
          <h1 className="text-balance text-5xl font-bold tracking-tight sm:text-6xl">
            AI 驱动的小红书
            <span className="bg-gradient-to-r from-pink-500 to-orange-500 bg-clip-text text-transparent">
              爆款内容生成器
            </span>
          </h1>
          <p className="text-pretty text-xl text-muted-foreground leading-relaxed">
            一键生成吸睛封面、爆款标题、热门标签和优质内容
            <br />
            让你的小红书笔记轻松获得更多曝光
          </p>
          <div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
            {user ? (
              <Link href="/generator">
                <Button size="lg" className="text-lg">
                  <Sparkles className="mr-2 h-5 w-5" />
                  开始生成
                </Button>
              </Link>
            ) : (
              <>
                <Button size="lg" className="text-lg" onClick={trialUser}>
                  <Sparkles className="mr-2 h-5 w-5" />
                  免费试用
                </Button>
                <Link href="/auth/sign-up">
                  <Button size="lg" variant="outline" className="text-lg bg-transparent">
                    注册解锁无限次数
                  </Button>
                </Link>
              </>
            )}
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="container mx-auto px-4 py-16">
        <h2 className="mb-12 text-center text-3xl font-bold">核心功能</h2>
        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
          <Card className="p-6 text-center">
            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-pink-100 dark:bg-pink-900/20">
              <ImageIcon className="h-6 w-6 text-pink-600 dark:text-pink-400" />
            </div>
            <h3 className="mb-2 text-lg font-semibold">AI 封面生成</h3>
            <p className="text-sm text-muted-foreground">根据内容主题自动生成吸睛封面图，提升点击率</p>
          </Card>

          <Card className="p-6 text-center">
            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-orange-100 dark:bg-orange-900/20">
              <Zap className="h-6 w-6 text-orange-600 dark:text-orange-400" />
            </div>
            <h3 className="mb-2 text-lg font-semibold">爆款标题</h3>
            <p className="text-sm text-muted-foreground">AI 分析热门趋势，生成高转化率的标题文案</p>
          </Card>

          <Card className="p-6 text-center">
            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-purple-100 dark:bg-purple-900/20">
              <TrendingUp className="h-6 w-6 text-purple-600 dark:text-purple-400" />
            </div>
            <h3 className="mb-2 text-lg font-semibold">热门标签</h3>
            <p className="text-sm text-muted-foreground">智能推荐相关热门标签，增加内容曝光度</p>
          </Card>

          <Card className="p-6 text-center">
            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-blue-100 dark:bg-blue-900/20">
              <Sparkles className="h-6 w-6 text-blue-600 dark:text-blue-400" />
            </div>
            <h3 className="mb-2 text-lg font-semibold">优质内容</h3>
            <p className="text-sm text-muted-foreground">多种风格模板，生成符合小红书调性的优质文案</p>
          </Card>
        </div>
      </section>

      {/* Examples Section */}
      <section className="container mx-auto px-4 py-16">
        <h2 className="mb-12 text-center text-3xl font-bold">生成示例</h2>
        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          <Card className="overflow-hidden">
            <img src="/sushi.png" alt="美食示例" className="h-48 w-full object-cover" />
            <div className="p-4">
              <h3 className="mb-2 font-semibold">🍜 这家店的拉面太绝了！人均50吃到撑</h3>
              <div className="mb-2 flex flex-wrap gap-2">
                <span className="rounded-full bg-pink-100 px-2 py-1 text-xs text-pink-700 dark:bg-pink-900/20 dark:text-pink-400">
                  #美食探店
                </span>
                <span className="rounded-full bg-pink-100 px-2 py-1 text-xs text-pink-700 dark:bg-pink-900/20 dark:text-pink-400">
                  #拉面
                </span>
                <span className="rounded-full bg-pink-100 px-2 py-1 text-xs text-pink-700 dark:bg-pink-900/20 dark:text-pink-400">
                  #性价比
                </span>
              </div>
              <p className="text-sm text-muted-foreground">姐妹们！今天发现了一家宝藏拉面店...</p>
            </div>
          </Card>

          <Card className="overflow-hidden">
            <img src="/hangzhou.png" alt="旅行示例" className="h-48 w-full object-cover" />
            <div className="p-4">
              <h3 className="mb-2 font-semibold">✈️ 三天两夜杭州攻略｜人均1000玩转西湖</h3>
              <div className="mb-2 flex flex-wrap gap-2">
                <span className="rounded-full bg-orange-100 px-2 py-1 text-xs text-orange-700 dark:bg-orange-900/20 dark:text-orange-400">
                  #旅行攻略
                </span>
                <span className="rounded-full bg-orange-100 px-2 py-1 text-xs text-orange-700 dark:bg-orange-900/20 dark:text-orange-400">
                  #杭州
                </span>
                <span className="rounded-full bg-orange-100 px-2 py-1 text-xs text-orange-700 dark:bg-orange-900/20 dark:text-orange-400">
                  #西湖
                </span>
              </div>
              <p className="text-sm text-muted-foreground">超详细的杭州三日游攻略来啦！包含住宿、美食...</p>
            </div>
          </Card>

          <Card className="overflow-hidden">
            <img src="/skin.png" alt="护肤示例" className="h-48 w-full object-cover" />
            <div className="p-4">
              <h3 className="mb-2 font-semibold">💄 学生党平价护肤｜30天养出水光肌</h3>
              <div className="mb-2 flex flex-wrap gap-2">
                <span className="rounded-full bg-purple-100 px-2 py-1 text-xs text-purple-700 dark:bg-purple-900/20 dark:text-purple-400">
                  #护肤分享
                </span>
                <span className="rounded-full bg-purple-100 px-2 py-1 text-xs text-purple-700 dark:bg-purple-900/20 dark:text-purple-400">
                  #学生党
                </span>
                <span className="rounded-full bg-purple-100 px-2 py-1 text-xs text-purple-700 dark:bg-purple-900/20 dark:text-purple-400">
                  #平价好物
                </span>
              </div>
              <p className="text-sm text-muted-foreground">姐妹们！我用这套平价护肤方案，皮肤真的变好了...</p>
            </div>
          </Card>
        </div>
      </section>

      {/* CTA Section */}
      <section className="container mx-auto px-4 py-20 text-center">
        <div className="mx-auto max-w-2xl space-y-6">
          <h2 className="text-3xl font-bold">立即开始创作爆款内容</h2>
          <p className="text-lg text-muted-foreground">注册用户享受无限次数生成，试用用户每日限制 5 次</p>
          <div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
            {user ? (
              <Link href="/generator">
                <Button size="lg" className="text-lg">
                  <Sparkles className="mr-2 h-5 w-5" />
                  开始生成内容
                </Button>
              </Link>
            ) : (
              <>
                <Link href="/auth/sign-up">
                  <Button size="lg" className="text-lg">
                    免费注册
                  </Button>
                </Link>
                <Link href="/generator">
                  <Button size="lg" variant="outline" className="text-lg bg-transparent">
                    先试用看看
                  </Button>
                </Link>
              </>
            )}
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t bg-muted/50 py-8">
        <div className="container mx-auto px-4 text-center text-sm text-muted-foreground">
          <p>© 2025 小红书 AI 生成器. All rights reserved.</p>
        </div>
      </footer>
    </div>
  )
}
